import React from 'react';
import { Layout } from 'antd';
import { WaterMark } from '@ant-design/pro-layout';

import IconMenuItem from '@/components/IconMenuItem';
import { RouteConfig } from './router';
import MoreSpan from '@/components/MoreSpan';
import MyMenu from '@/components/MyMenu';
import './App.css';

const { Header, Content, Footer } = Layout;

const Index: React.FunctionComponent<{}> = () => {

  return (
    <Layout>
      <Header className='my-header'> 
        <MyMenu level={1} mode='horizontal' theme='light' overflowedIndicator={<MoreSpan />} iconMenuItem={<IconMenuItem />} showIconMenuItem />
      </Header>
      <WaterMark content='2022-lzx'>
        <Content className='my-content'>
          <RouteConfig />
        </Content>
      </WaterMark>
      <Footer style={{ textAlign: 'center' }}>React-Hooks-Ts ©2022 Created by ZhiXin Lu</Footer>
    </Layout>
  );
}
 
export default Index;
